<script setup>
import {showToast} from "vant";
import {onUpdated, ref} from "vue";
import Refresh from "@/components/refresh.vue";
import {useRoute, useRouter} from "vue-router";
import {getProductList} from "@/api/shoe.js";

const price = ref(100);
const title = defineProps({
  title: String
})
const columns = ref([
  {text: '默认', value: 'normal'},
  {text: '价格从高到低', value: 'hi-low'},
  {text: '价格从低到高', value: 'low-hi'},
  {text: '最新', value: 'lasted'},
  {text: '最热', value: 'hot'},
])
const fieldValue = ref('');
const showPicker = ref(false);
const router = useRouter()
const route = useRoute()
const shoeList = ref([])
const value1 = ref(0)
const value2 = ref('normal')
const option1 = ref([
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
    ])
function onRefresh() {
  fresh()
  console.log('onRefresh')
}

function fresh() {
  shoeList.value = []
  getProductList({detail: route.params.title, start: 0, cnt: 100, sort: 0}).then(result => {
    for (let i = 0; i < result.data.length; i++) {
      for (let j = 0; j < result.data[i].data.length; j++) {
        shoeList.value.push(result.data[i].data[j])
      }
    }
  })
}

console.log(route.params.title)
fresh()
onUpdated(() => {
  console.log('onUpdated')
  fresh()
})
// console.log(title.title)
</script>

<template>
  <div>
    <van-nav-bar
        title="鞋子列表"
        left-text="返回"
        left-arrow
        safe-area-inset-top
        @click-left="$router.back()"/>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1"/>
      <van-dropdown-item v-model="value2" :options="columns"/>
    </van-dropdown-menu>
    <refresh @onRefreshItem="onRefresh">
      <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="item in shoeList" :key="item.pid" default="default"
                       @click="$router.push({name:'shoeDetail',params:{id:item.pid}})">
          <div class="demo-grid-item">
            <van-image
                :src="item.picture"
            />
            <van-text-ellipsis rows="4"
                               style="text-align: center;color: var(--van-grid-item-text-color);font-size: 10px"
                               :content="item.detail"/>
            <div style="text-align: right;color: lightskyblue">¥{{ item.price }}</div>
          </div>
        </van-grid-item>
      </van-grid>
    </refresh>
  </div>
</template>

<style scoped>

</style>